<template>
	<div class="index">
		<myheader></myheader>
		<section>
			<div class="container">
				<div class="row">
					<div
						class="col-xs-12 col-xl-6 item"
						v-for="item in bloglist"
						:key="item._id"
					>
						<blog :item="item"></blog>
					</div>
				</div>
			</div>
		</section>
	</div>
</template>

<script>
import Myheader from "@/components/header.vue";
import Blog from "@/components/blog.vue";
import { apigetbloglist } from "@/network/request";
import scroll from "@/utils/scroll";
export default {
	name: "index",
	components: {
		Blog,
		Myheader,
	},
	data() {
		return {
			bloglist: [],
			options: {
				limit: 10,
				skip: 0,
				key: "",
			},
		};
	},
	created() {
		this.getbloglist();
	},
	mounted() {
		scroll.start(this.getbloglist);
	},
	beforeDestroy() {
		scroll.end();
	},
	methods: {
		getbloglist() {
			apigetbloglist(this.options)
				.then((res) => {
					console.log(res);
					this.bloglist = this.bloglist.concat(res.data);
					this.options.skip = this.bloglist.length;
					if (res.data.length < this.options.limit) {
						scroll.end();
					}
				})
				.catch((err) => {});
		},
	},
};
</script>

<style lang="scss" scoped>
section {
	width: 100%;
	height: 100%;
	margin-top: 10px;
	padding-bottom: 80px;
	.row .item {
		padding: 10px;
		box-sizing: border-box;
	}
}
</style>
